<script setup lang="ts">
import { ref } from 'vue'
import { get } from '@/utils/service'
import { VUE_APP_BASE_API } from '@/utils/baseConfig'
import router from '@/router'
const noEmpty = ref(false)
const memberCardOrderLists = ref([])
const loading = ref(false)
const finished = ref(false)
const arrowDirection = ref('down')
const page = ref(1)
const limit = 5
function onClickLeft() {
  window.history.back()
}
function onLoad() {
  queryData()
}
function queryData() {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  get('/onlineBookingWechatNew/queryMyOnlineWechat', {
    limit: limit,
    page: page.value,
  })
    .then((res) => {
      if (res.code === 0) {
        // 正常返回数据
        loading.value = false
        noEmpty.value = false
        res.data.forEach((item) => {
          memberCardOrderLists.value.push({
            ...item,
          })
        })
        if (page.value == res.totalPage) {
          loading.value = true
          finished.value = true
          noEmpty.value = false
        } else {
          page.value++
        }
      } else {
        //其他返回数据情况
        if (res.count > 0) {
          //有数据情况
          if (res.code == 201) {
            loading.value = true
            finished.value = true
            noEmpty.value = false
          }
        } else {
          //无数据情况
          loading.value = true
          finished.value = true
          noEmpty.value = true
        }
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
//显示套餐历史使用记录
function openViewUsed(dbid: number) {
  const index = memberCardOrderLists.value.findIndex((item) => item.dbid === dbid)
  if (index !== -1) {
    const showUsed = memberCardOrderLists.value[index].showUsed || false
    if (showUsed == false) {
      memberCardOrderLists.value[index].showUsed = true
      arrowDirection.value = 'up'
    } else {
      memberCardOrderLists.value[index].showUsed = false
      arrowDirection.value = 'down'
    }
  }
}
function goHome() {
  router.push({ path: '/' })
}
</script>
<template>
  <van-nav-bar title="我的预约" left-text="返回" left-arrow @click-left="onClickLeft" />
  <van-empty
    v-if="noEmpty == true"
    :image="VUE_APP_BASE_API+'/images/vue/noData.png'"
    image-size="100"
    description="暂无数据"
  />
  <div class="memberCarEmptyContent" v-if="noEmpty == true">
    <p class="friendTip" style="cursor: pointer" @click="goHome()">去主页预约</p>
  </div>
  <van-list
    v-else
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div
      class="memberCarContent"
      v-for="memberCardOrder in memberCardOrderLists"
      :key="memberCardOrder.dbid"
    >
      <div class="memberCardHeader">
        <div class="memberCardTitle">{{ memberCardOrder.bookingTypeName }}</div>
        <div class="rightText">
          <div class="button usedButton" v-if="memberCardOrder.status == 1">
            {{ memberCardOrder.statusName }}
          </div>
          <div class="button useButton" v-else-if="memberCardOrder.status == 2">
            {{ memberCardOrder.statusName }}
          </div>
          <div class="button overTimeButton" v-else>
            {{ memberCardOrder.statusName }}
          </div>
        </div>
      </div>
      <van-cell-group>
        <van-cell title="门店" :value="memberCardOrder.acceptEnterpriseName" style="va"/>
        <van-cell title="预约日期" :value="memberCardOrder.bookingDate" style="va"/>
        <van-cell title="预约时间" :value="memberCardOrder.bookingTime||'无'" style="va"/>
       <!--  <van-cell title="联系人 " :value="memberCardOrder.name" />
        <van-cell title="联系电话" :value="memberCardOrder.mobilePhone" /> -->
        <van-cell title="车型" :value="memberCardOrder.carSeriyName||'无'" />
        <van-cell title="车牌号" :value="memberCardOrder.carPlate||'无'" />
        <van-cell title="创建时间" :value="memberCardOrder.createTime||'无'" />
      </van-cell-group>
      <van-cell-group v-if="memberCardOrder.status == 2">
        <hr class="hrdashed"></hr>
        <van-cell title="处理人" :value="memberCardOrder.operator" />
        <van-cell title="处理时间 " :value="memberCardOrder.modifyTime" />
        <van-cell title="备注" :value="memberCardOrder.dealRecord" />
        <div class="myOnlineCell">
            <div class="title">
                客服电话
            </div>
            <div class="rightContent">
              <div>
                <img :src="VUE_APP_BASE_API+'/images/vue/phoneCall.png'"/>
              </div>
                <div>
                  <a :href="'tel:'+memberCardOrder.userPhone">{{memberCardOrder.userPhone}}</a>
                </div>
            </div>
        </div>
      </van-cell-group>
    </div>
    <br />
  </van-list>

</template>
<style>
.van-hairline--top-bottom:after,
.van-hairline-unset--top-bottom:after {
  border-width: 0ch;
}
 .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
</style>
